```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用驱动学习 - Java Web开发实战</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            min-width: 200px;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            z-index: 1;
            border-radius: 8px;
            overflow: hidden;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <header class="gradient-bg text-white py-20">
        <div class="container mx-auto px-6 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">应用驱动学习</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">通过实战项目掌握Java Web开发核心技术</p>
            <div class="flex justify-center space-x-4">
                <a href="#login" class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold transition duration-300 shadow-lg">
                    <i class="fas fa-sign-in-alt mr-2"></i>登录
                </a>
                <a href="#register" class="bg-indigo-800 text-white hover:bg-indigo-900 px-8 py-3 rounded-lg font-semibold transition duration-300 shadow-lg">
                    <i class="fas fa-user-plus mr-2"></i>注册
                </a>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-12">
        <!-- Introduction -->
        <section class="mb-16">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">Java Web开发核心知识</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">通过实际项目案例，系统学习Servlet、JSP、请求响应处理等Web开发核心技术</p>
            </div>
            
            <!-- Features Grid -->
            <div class="grid md:grid-cols-3 gap-8 mb-16">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="feature-icon bg-indigo-100 text-indigo-600 mx-auto">
                        <i class="fas fa-user-circle text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 text-center">用户认证系统</h3>
                    <p class="text-gray-600">实现完整的注册、登录、验证码、记住我等功能，掌握用户认证全流程开发</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="feature-icon bg-purple-100 text-purple-600 mx-auto">
                        <i class="fas fa-exchange-alt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 text-center">请求与响应处理</h3>
                    <p class="text-gray-600">深入理解HTTP协议，掌握Request和Response对象的核心用法</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="feature-icon bg-blue-100 text-blue-600 mx-auto">
                        <i class="fas fa-route text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 text-center">请求转发与重定向</h3>
                    <p class="text-gray-600">区分转发与重定向机制，解决常见中文乱码问题</p>
                </div>
            </div>
        </section>

        <!-- Tabs Section -->
        <section class="mb-16">
            <div class="flex border-b border-gray-200 mb-8">
                <button class="tab-btn py-3 px-6 font-medium text-gray-500 hover:text-indigo-600 border-b-2 border-transparent hover:border-indigo-500 active" data-tab="register-tab">注册功能</button>
                <button class="tab-btn py-3 px-6 font-medium text-gray-500 hover:text-indigo-600 border-b-2 border-transparent hover:border-indigo-500" data-tab="login-tab">登录功能</button>
                <button class="tab-btn py-3 px-6 font-medium text-gray-500 hover:text-indigo-600 border-b-2 border-transparent hover:border-indigo-500" data-tab="request-tab">Request对象</button>
            </div>
            
            <div id="register-tab" class="tab-content active">
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-8">
                        <h3 class="text-2xl font-bold mb-6 text-indigo-600">注册功能实现要点</h3>
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">1. 注册页面与Servlet创建</h4>
                                    <p class="text-gray-600">创建包含各项表单项的注册页面，并将数据提交到后台的Servlet进行处理</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">2. 注册成功反馈</h4>
                                    <p class="text-gray-600">注册成功后给用户"注册成功"的反馈，并自动跳转到登录页面</p>
                                    <pre class="bg-gray-100 p-3 rounded mt-2 text-sm overflow-x-auto"><code>response.setHeader("refresh", "3;url=login.html");</code></pre>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">3. 中文乱码处理</h4>
                                    <p class="text-gray-600">针对GET和POST请求分别处理中文乱码问题</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="login-tab" class="tab-content">
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-8">
                        <h3 class="text-2xl font-bold mb-6 text-indigo-600">登录功能实现要点</h3>
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
                                    <i class="fas fa-key"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">1. 基础登录功能</h4>
                                    <p class="text-gray-600">通过注册的账号来登录，创建登录页面，对成功/失败给予反馈</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
                                    <i class="fas fa-shield-alt"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">2. 验证码功能</h4>
                                    <p class="text-gray-600">添加验证码增强安全性，实现点击更换验证码功能</p>
                                    <div class="mt-3 bg-gray-100 p-4 rounded-lg">
                                        <div class="flex items-center">
                                            <img src="https://via.placeholder.com/120x40?text=验证码示例" alt="验证码示例" class="mr-2">
                                            <button class="text-sm text-blue-500 hover:text-blue-700">
                                                <i class="fas fa-sync-alt mr-1"></i>换一张
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
                                    <i class="fas fa-cookie"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">3. 记住我与注销</h4>
                                    <p class="text-gray-600">实现"记住我"自动登录功能，处理Cookie中存放中文的问题</p>
                                    <pre class="bg-gray-100 p-3 rounded mt-2 text-sm overflow-x-auto"><code>URLEncoder.encode(username, "utf-8");</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="request-tab" class="tab-content">
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-8">
                        <h3 class="text-2xl font-bold mb-6 text-indigo-600">Request对象核心应用</h3>
                        
                        <div class="mb-8">
                            <h4 class="text-xl font-semibold mb-4 text-blue-600">1. 获取客户机信息</h4>
                            <div class="grid md:grid-cols-2 gap-4">
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <p class="font-medium">getRequestURL()</p>
                                    <p class="text-sm text-gray-600">返回客户端发出请求时的完整URL</p>
                                </div>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <p class="font-medium">getRemoteAddr()</p>
                                    <p class="text-sm text-gray-600">返回发出请求的客户机的IP地址</p>
                                </div>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <p class="font-medium">getMethod()</p>
                                    <p class="text-sm text-gray-600">得到客户机请求方式(GET/POST等)</p>
                                </div>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <p class="font-medium">getLocalAddr()</p>
                                    <p class="text-sm text-gray-600">返回WEB服务器的IP地址</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-8">
                            <h4 class="text-xl font-semibold mb-4 text-blue-600">2. 获取客户端提交数据</h4>
                            <div class="grid md:grid-cols-3 gap-4">
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <p class="font-medium">getParameter(name)</p>
                                    <p class="text-sm text-gray-600">获取单个表单项的值</p>
                                </div>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <p class="font-medium">getParameterValues(name)</p>
                                    <p class="text-sm text-gray-600">获取复选框等多值表单项</p>
                                </div>
                                <div class="bg-gray-50 p-4 rounded-lg">
                                    <p class="font-medium">getInputStream()</p>
                                    <p class="text-sm text-gray-600">获取请求体原始数据流</p>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="text-xl font-semibold mb-4 text-blue-600">3. 中文乱码处理</h4>
                            <div class="bg-blue-50 p-6 rounded-lg">
                                <div class="mb-4">
                                    <p class="font-medium">POST请求处理</p>
                                    <pre class="bg-white p-3 rounded mt-2 text-sm overflow-x-auto"><code>request.setCharacterEncoding("UTF-8");</code></pre>
                                </div>
                                <div>
                                    <p class="font-medium">GET请求处理</p>
                                    <pre class="bg-white p-3 rounded mt-2 text-sm overflow-x-auto"><code>new String(username.getBytes("ISO-8859-1"), "UTF-8");</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Visualization Section -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-center">请求处理流程可视化</h2>
            <div class="bg-white p-8 rounded-xl shadow-md">
                <div class="mermaid">
                    graph TD
                        A[客户端] -->|HTTP请求| B(Web服务器)
                        B --> C{请求处理}
                        C -->|创建| D[Request对象]
                        C -->|创建| E[Response对象]
                        D --> F[获取请求数据]
                        F --> G[处理业务逻辑]
                        G --> H[生成响应]
                        H --> E
                        E -->|HTTP响应| A
                        style A fill:#f9fafb,stroke:#4f46e5
                        style B fill:#eef2ff,stroke:#4f46e5
                        style D fill:#e0e7ff,stroke:#6366f1
                        style E fill:#e0e7ff,stroke:#6366f1
                </div>
            </div>
        </section>

        <!-- Redirect Explanation -->
        <section class="mb-16">
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-8">
                    <h3 class="text-2xl font-bold mb-6 text-indigo-600">重定向机制详解</h3>
                    <div class="flex flex-col md:flex-row gap-8">
                        <div class="flex-1">
                            <h4 class="text-xl font-semibold mb-4">重定向流程</h4>
                            <ol class="list-decimal pl-5 space-y-3">
                                <li>用户请求访问服务器端组件</li>
                                <li>服务器返回状态码为302的响应</li>
                                <li>浏览器自动请求新URL</li>
                                <li>浏览器接收新组件的响应</li>
                            </ol>
                            <div class="mt-6">
                                <pre class="bg-gray-100 p-4 rounded-lg"><code>response.sendRedirect("newLocation.html");</code></pre>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h4 class="text-xl font-semibold mb-4">重定向与转发对比</h4>
                            <div class="overflow-x-auto">
                                <table class="min-w-full bg-white rounded-lg overflow-hidden">
                                    <thead class="bg-gray-100">
                                        <tr>
                                            <th class="py-2 px-4 text-left">特性</th>
                                            <th class="py-2 px-4 text-left">重定向</th>
                                            <th class="py-2 px-4 text-left">转发</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200">
                                        <tr>
                                            <td class="py-2 px-4">地址栏变化</td>
                                            <td class="py-2 px-4">变化</td>
                                            <td class="py-2 px-4">不变</td>
                                        </tr>
                                        <tr>
                                            <td class="py-2 px-4">请求次数</td>
                                            <td class="py-2 px-4">2次</td>
                                            <td class="py-2 px-4">1次</td>
                                        </tr>
                                        <tr>
                                            <td class="py-2 px-4">数据共享</td>
                                            <td class="py-2 px-4">不共享</td>
                                            <td class="py-2 px-4">共享</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto px-6 text-center">
            <div class="mb-4">
                <h3 class="text-xl font-semibold text-white mb-2">技术小馆</h3>
                <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition duration-300">
                    <i class="fas fa-external-link-alt mr-1"></i>www.yuque.com/jtostring
                </a>
            </div>
            <p class="text-sm">© 2023 应用驱动学习. All rights reserved.</p>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // Tab functionality
        document.addEventListener('DOMContentLoaded', function() {
            const tabBtns = document.querySelectorAll('.tab-btn');
            
            tabBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // Remove active class from all buttons and tabs
                    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
                    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
                    
                    // Add active class to clicked button
                    this.classList.add('active');
                    
                    // Show corresponding tab
                    const tabId = this.getAttribute('data-tab');
                    document.getElementById(tabId).classList.add('active');
                });
            });
        });
    </script>
</body>
</html>
```